<template>
<h2>自定义hook操作</h2>
<h4>x:{{x}},y:{{y}}</h4>
<h3 v-if="loading">正在加载中..</h3>
<h3 v-else-if="errorMsg">错误信息:{{errorMsg}}</h3>
<ul v-else>
  <li>id{{data.id}}</li>
  <li>address:{{data.address}}</li>
  <li>distance:{{data.distance}}</li>
</ul>
<hr>
<ul v-for="item in data" :key="item.id">
<li>id:{{item.id}}</li>
<li>title:{{item.title}}</li>
<li>price:{{item.price}}</li>
</ul>
</template>

<script>
import {defineComponent,watch} from 'vue'
import useMousePositions from './hooks/useMousePositions'
import useRequest from './hooks/useRequest'
export default defineComponent({
  name: 'App',
  setup() {
    const {x,y} = useMousePositions()
    // const {loading,data,errorMsg} = useRequest('/data/address.json')
    const {loading,data,errorMsg} = useRequest('/data/products.json')
    watch(data,()=>{
      console.log(data.value.length);
    })
    return {
      x,y,loading,data,errorMsg
    }
  }
  
})
</script>

<style lang="less" scoped>

</style>
